<template>
	<view class="content">
		<view class="section-2">
			<view class="section-body">
				<view class="form">
					<view class="form-item">
						<view class="label">姓名</view>
						<view class="shape"></view>
						<view class="input">
							<u--input placeholderClass="input-placeholder" class="input-body" v-model="form.name">
							</u--input>
						</view>
					</view>
					<view class="actions">
						<view class="action" @click="handleResetForm()">
							<text>重</text>
							<text>置</text>
						</view>
						<view class="action search" @click="handleSearch()">
							<text>查</text>
							<text>询</text>
						</view>
					</view>
				</view>

				<view class="list">
					<view class="table-header">
						<view class="table-th w_code">序号</view>
						<view class="table-th w_name">姓名</view>
						<view class="table-th w_company">单位</view>
						<view class="table-th w_point">扣分</view>
					</view>
					<mescroll-uni ref="mescrollRef" top='260' @init="mescrollInit" @up="upCallback" :up="upOption"
						:down="{use: false}">
						<view @click="go(item)" class="item" v-for="(item, idx) in list" :key="item.id">
							<view class="parent">
								<view class="td w_code">{{idx + 1}}</view>
								<view class="td w_name">{{item.zrr_name}}</view>
								<view class="td w_company">{{item.dw_name}}</view>
								<view class="td w_point">{{item.total_score}}</view>
								<view class="action">
									<view class="iconfont icon-xiangyou1"></view>
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		evaluateListApi
	} from '@/api/statistics.js';
	export default {
		data() {
			return {
				form: {
					name: '',
				},
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
				list: [],
			}
		},
		methods: {
			go(item) {
				uni.navigateTo({
					url: `/pages/statistics/safety/team/evaluate/index?id=${item.id}&point1=${item.comment_score}&point2=${item.violation_score}`
				})
			},
			handleResetForm() {
				for (let key in this.form) {
					this.form[key] = '';
				}
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			},
			handleSearch() {
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			onNavigationBarButtonTap(res) {
				uni.navigateTo({
					url: '/pages/statistics/safety/team/blacklist/index?type=team'
				})
			},
			async upCallback(page) {
				const {
					data
				} = await evaluateListApi({
					...this.form,
					page: page.num,
					pageSize: this.pageSize,
				});

				if (data.code === 1 || data.code === 200) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = data.data.data;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.data.last_page;
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动置空列表

					this.list = this.list.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage);
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen);
					}, 20);
				} else {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.section-2 {

		width: 100%;
		background: #2e5efe;

		.section-body {
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
		}

		.list {
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.05) inset;
			width: 100%;
			box-sizing: border-box;
			padding-left: 40rpx;
			padding-right: 40rpx;

			.w_code {
				width: 80rpx;
			}

			.w_name {
				width: 130rpx;
			}

			.w_company {
				width: 310rpx;
				font-size: 30rpx;
			}

			.w_point {
				// width: 140rpx;
			}

			.table-header {
				width: 100%;
				@include clear();
				padding-top: 10rpx;
				display: flex;
				font-size: 26rpx;
				color: #7f98ae;
				text-align: center;
				.table-th {
					// display: flex;
					// font-size: 26rpx;
					// color: #7f98ae;
					// float: left;
					// text-align: center;
					// font-weight: bold;
				}
			}

			// border-top: 2rpx solid #d8e4f2;
			// .scroll-wrapper{
			// 	width: 100%;
			// 	height: calc(100vh - 260rpx);
			// }
			.result {
				padding-top: 30rpx;
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				@include clear();

				.left {
					float: left;
					font-size: 26rpx;
					color: #0535d6;

					.iconfont {
						font-size: 26rpx;
						margin-right: 10rpx;
					}

					&:last-child {
						float: right;
					}
				}
			}

			.item {
				width: 100%;
				border-bottom: solid 2rpx #f2f2f0;

				.parent {
					width: 100%;
					@include clear();
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					box-sizing: border-box;
					padding-left: 40rpx;
					padding-right: 40rpx;

					.td {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 30rpx;
						letter-spacing: 2rpx;
						color: #3b3c40;
						text-align: center;
						float: left;
					}

					.w_company {
						font-size: 30rpx;
						line-height: 30rpx;
					}

					.action {
						float: right;
						width: 32rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						color: #3b3c40;

						.iconfont {
							font-size: 30rpx;
						}
					}
				}
			}
		}

		.actions {
			width: 100%;
			height: 50rpx;
			margin-top: 29rpx;
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;

			.action {
				width: 288rpx;
				height: 48rpx;
				background-color: #395cf5;
				border-radius: 20rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 48rpx;
				color: #ffffff;

				text {
					&:first-child {
						margin-right: 20rpx;
					}
				}
			}

			.search {
				background-color: #1534ce;
			}
		}

		.form {
			width: 100%;
			padding: 0 75rpx;
			padding-top: 40rpx;
			box-sizing: border-box;

			.form-item {
				width: 600rpx;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				margin: 0 auto;
				margin-bottom: 34rpx;
				@include clear();

				.label {
					float: left;
					width: 134rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}

				.shape {
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}

				.input {
					float: left;
					width: calc(100% - 134rpx - 3rpx);

					.time-body {
						height: 48rpx;
						width: 45%;
						float: left;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
						text-align: center;
						line-height: 48rpx;
					}

					.time-split {
						float: left;
						width: 10%;
						text-align: center;
						color: #1534ce;
						line-height: 44rpx;
					}

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						line-height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}

			.size4 {
				.input {
					position: relative;

					.iconfont {
						position: absolute;
						right: 25rpx;
						top: 7rpx;
						font-size: 30rpx;
						color: #dad9df;
					}
				}
			}

			.size2 {
				.label {
					width: 77rpx;
				}

				.input {
					width: calc(100% - 77rpx - 3rpx);
				}
			}
		}

	}
</style>
